<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <search :config="searchConfig" @getHeight="getHeight" @search="search"/>
      <!-- table区域-begin -->
      <div class="page_table">
        <vxe-grid
          ref="xGrid"
          v-bind="vexConfig"
          :align="left"
          :border="true"
          :checkbox-config="checkboxConfig"
          :columns="columns"
          :data="dataSource"
          :height="pageHeight-seachHeight-90"
          :loading="loading"
          :resizable="true"
          :showOverflow="true"
          :toolbar-config="tableToolbar"
          size="mini"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectChangeEvent"
        >
          <template #toolbar_buttons>
            <div class="table-operator">
              <a-button type="primary" @click="delegateShow=true" :disabled="selectionRows.length!=1">委派</a-button>
            </div>
          </template>
          <template #update="{ row }">
            <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
          </template>
          <template #isSuspended="{ row }">
            <span>{{ !Boolean(row.isSuspended) ? '已激活' : '已挂起' }}</span>
          </template>
          <template #action="{ row }">
            <a href="javascript:void(0);"  @click="detail(row)">处理</a>
          </template>
          <template #pager>
            <vxe-pager
              :currentPage.sync="ipagination.current"
              :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
              :page-size.sync="ipagination.pageSize"
              :pageSizes="ipagination.pageSizeOptions"
              :total="ipagination.total" @page-change="handlePageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
    </a-card>
    <a-modal
      title="委派"
      v-model="delegateShow"
      :mask-closable="false"
      :width="500"
      :styles="{top: '30px'}"
    >
      <a-form ref="form" :model="form" :label-width="70">
        <a-form-item label="委派人员" prop="reason">
          <j-select-user :multiple="false"
                         v-model="form.userName"
                         selectButtonText="选择"
                         :buttons="false"
                         :inputs="true"
                         searchIcon="search"
                         :returnName="false"
                         @select="handleLeaderName">
          </j-select-user>
        </a-form-item>
      </a-form>
      <div slot="footer">
        <a-button type="text" @click="handelCancel">取消</a-button>
        <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
      </div>
    </a-modal>
    <activiti-form ref="activitiForm" @ok="loadData()"></activiti-form>
  </div>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JSelectUser from '@/components/cn-select-popup/JSelectUser'
import { getAction, postAction } from '@/api/manage'
import ActivitiForm from '@views/activiti/form/ActivitiForm'

export default {
  name: 'todo-manage',
  mixins: [activitiMixin, PageListMixin],
  components: { ActivitiForm,JSelectUser},
  data() {
    return {
      //查询区域
      searchConfig: [
        {
          type: 'input',
          name: 'name',
          placeholder: '任务名称'
        }
      ],
      loading: true, // 表单加载状态
      columns: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },
        {
          title: '流程编号',
          minWidth: 80,
          field: 'processInstanceId'
        },
        {
          title: '任务名称',
          minWidth: 80,
          field: 'processTitle'
        },
        {
          title: '所属流程',
          minWidth: 80,
          field: 'processName'
        },
        {
          title: '委托人',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '流程发起人',
          minWidth: 80,
          field: 'commitName'
        },
        {
          title: '优先级',
          minWidth: 80,
          field: 'priority_dictText'
        },
        {
          title: '状态',
          minWidth: 150,
          field: 'isSuspended',
          slots: { default: 'isSuspended' },
          // customRender: function(text) {
          //   if (!Boolean(text)) {
          //     return '已激活'
          //   } else {
          //     return '已挂起'
          //   }
          // }
        },
        {
          title: '创建时间',
          minWidth: 80,
          field: 'createTime'
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 80,
          slots: { default: 'action' }
        }
      ],
      modalTaskTitle: '',
      delegateShow:false,
      modalTitle: '', // 添加或编辑标题
      form: {
      },
      formValidate: {
        // 表单验证规则
      },
      submitLoading: false, // 添加或编辑提交状态
      data: [], // 表单数据
      total: 0, // 表单数据总数
      dictPriority: [],
      url: {
        list: window._CONFIG['domianActivitiURL'] + '/actTask/todoList',
        pass: window._CONFIG['domianActivitiURL'] + '/actTask/pass',
        back: window._CONFIG['domianActivitiURL'] + '/actTask/back',
        backToTask: window._CONFIG['domianActivitiURL'] + '/actTask/backToTask',
        delegate: window._CONFIG['domianActivitiURL'] + '/actTask/delegate',
        getNextNode: window._CONFIG['domianActivitiURL'] + '/activiti_process/getNextNode',
        getNode: window._CONFIG['domianActivitiURL'] + '/activiti_process/getNode/',
        getBackList: window._CONFIG['domianActivitiURL'] + '/actTask/getBackList/',
        passAll: window._CONFIG['domianActivitiURL'] + '/actTask/passAll/',
        backAll: window._CONFIG['domianActivitiURL'] + '/actTask/backAll/',
      },
      /*历史*/
      modalLsVisible: false,
      procInstId: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleLeaderName(e) {
      if (e && e.length) {
        this.form.delegatePositionCode = e[0].positionCode
      } else {
        this.form.delegatePositionCode = []
      }
    },
    handelSubmit() {
      if (!this.form.delegatePositionCode) {
        this.$message.error('请选择委派人员')
        return
      }
      let formData = Object.assign({}, this.form, {
        crmProcessInstanceId: this.selectionRows[0].id,
        taskId: this.selectionRows[0].taskId
      })
      this.submitLoading = true
      postAction(this.url.delegate, formData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.handelCancel()
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      }).finally(()=>{
        this.submitLoading = false
      })
    },
    handelCancel() {
      this.delegateShow = false
      this.form = {}
    },
    detail(r) {
      this.$refs.activitiForm.edit(r)
    },
  }
}
</script>